<template lang="html">
  <div class="group">
    <div class="breadNav">
      <el-breadcrumb separator="/" class="">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>服务班组设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="exeMain">
      <div class="grid-content" style="margin-bottom:20px"><el-button type="primary" @click="addgroup()">新增</el-button></div>
      <template v-loading="loading">
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%">
          <el-table-column
            prop="Name"
            label="班组名称">
          </el-table-column>
          <el-table-column
            prop="Phone"
            label="联系电话">
          </el-table-column>
          <el-table-column
            prop="Remark"
            label="备注">
          </el-table-column>
          <el-table-column
            prop="C_OwnFlag"
            label="所属级别">
          </el-table-column>
          <el-table-column
            prop="C_Bushu"
            label="所属单位">
          </el-table-column>
          <el-table-column
            prop=""
            label="操作">
            <template scope="scope">
              <el-button
                size="small"
                @click="editgroup(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="small"
                type="danger"
                @click="delgroup(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="groupfix" v-show="edit"></div>
    <div class="groupCon" v-show="edit">
      <div class="groupcontitle" v-if="type == 'add'">
        新增服务班组
      </div>
      <div class="groupcontitle" v-if="type == 'edit'">
        编辑服务班组
      </div>
      <div style="width:440px;padding:20px">
        <el-form ref="form" :model="form" label-width="80px" style="margin-top:20px">
          <el-form-item label="班组名称">
            <el-input placeholder="请输入班组名称" v-model="Name"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input placeholder="请输入联系电话" v-model="Tel"></el-input>
          </el-form-item>
          <el-form-item label="所属级别">
             <el-select v-model="form.level" placeholder="请选择所属级别" style="width:100%" v-on:change="selectLevel()">
               <el-option v-for="l in levellist" :value="l.Name" :key="l.Name" :label="l.Name"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="所属单位">
             <el-select v-model="form.unit" placeholder="请选择所属单位" style="width:100%" v-on:change="selectUnit()">
               <el-option v-for="u in unitlist" :value="u" :key="u" :label="u.Name"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="备注">
             <el-input type="textarea" v-model="form.remark" :rows="4" placeholder="请输入备注"></el-input>
           </el-form-item>
           <el-form-item>
            <el-button type="primary" @click="submit()">确定</el-button>
            <el-button @click="close()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'group',
  data() {
     return {
       form:{
         level:'',
         unit:'',
         remark:''
       },
       tableData: [],
       Name:'',
       Tel:'',
       OwnFlag:-1,
       BushuID:-1,
       ID:-1,
       company:'',
       levellist:[],
       ex:1,
       unitlist:[],
       type:'select',
       loading:true,
       edit:false //弹窗状态
     }
   },
   methods:{
     getbushulevel(){ //获取级别
       var data = {
         method:'getbushulist',
         Company:this.company,
         origin:'weixinwarmuser'
       }

       const _this = this
       this.post(this.jholdUrl,data,function(data){
         _this.loading = false;
         _this.levellist = data.Data
       })


     },
     selectLevel(){ //选择级别

       if(this.form.level == '小区'){
         this.ex = 0
       }

       this.form.unit = ''

       var data  = {
         method:'getbushulevel',
         company:this.company,
         bushulevelname:this.form.level,
         isex:this.ex
       }

       const _this = this;
       this.post(this.jholdUrl,data,function(res){
         _this.unitlist = res.Data;
       })

     },
     selectUnit(){

       this.BushuID = this.form.unit.ID;
       this.OwnFlag = this.form.unit.Level

     },
     getGroup(t){

       if(this.type == 'add' || this.type == 'edit'){ //新增 && 编辑
         if(this.Name == ''){
           this.$message({
             message: '班组名称不能为空',
             type: 'warning'
           });
           return
         }else if(this.Tel == ''){
           this.$message({
             message: '联系电话不能为空',
             type: 'warning'
           });
           return
         }

       }

       var data = {
         origin: 'WarmAppealService',
         method:'EditServiceGroup',
         Company:this.company,
         CmdType:t,
         ID:this.ID,
         Name:this.Name,
         Tel:this.Tel,
         Remark:this.form.remark,
         OwnFlag:this.OwnFlag,
         BushuID:this.BushuID,
       }

       const _this = this;
       this.post(this.jholdUrl,data,function(res){

         if(_this.type == 'del' || _this.type == 'add' || _this.type == 'edit'){
           _this.$message({
             message: '操作成功',
             type: 'success'
           });
           _this.edit = false
         }

         _this.tableData = res.Data
       })
     },
     submit(){
       this.getGroup(this.type)
     },
     addgroup(){ // 新增服务班组
       this.type = 'add';
       this.edit = true
     },
     close(){ // 关闭弹窗
       this.edit = false
     },
     editgroup(index, row){ //编辑服务班组
       this.type = 'edit';
       this.ID = row.id;
       this.edit = true;
       this.Name = row.Name;
       this.Tel = row.Phone;
       this.form.level = row.C_OwnFlag;
       this.form.unit = row.C_Bushu;
       this.form.remark = row.Remark
     },
     delgroup(index, row){ //删除服务班组

       this.$confirm('此操作将永久删除该服务班组, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         this.type = 'del';
         this.ID = row.id
         this.getGroup(this.type)
       }).catch(() => {
         this.$message({
           type: 'info',
           message: '已取消删除'
         });
       });

     }
   },
   created(){
     let info = JSON.parse(localStorage.loginInfo);
     this.company = info.company
     this.getGroup(this.type)
     this.getbushulevel()
   }
}
</script>

<style lang="css">
.exeMain{
  padding: 0 20px 20px 20px
}
.groupfix{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left:0;
  background: rgba(0,0,0,0.5);
  z-index: 1000
}
.groupCon{
  width: 500px;
  height: 500px;
  background: #fff;
  position: fixed;
  left:50%;
  margin-left: -250px;
  top: 50%;
  margin-top: -250px;
  z-index: 1001
}
.groupcontitle{
  width: 100%;
  padding: 10px 0;
  background: #20A0FF;
  color: #fff;
  text-align: center;
}
</style>
